<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>站点导航</title>
  <script src="./js/vue.js"></script>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/element-plus"></script>
  <link rel="stylesheet" href="./css/hover.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
</head>

<body>
  <div id="app"></div>

  <template id="tem">
    <div class="wraper">
      <header>
        <h1>
          <img src="./images/logo.png" alt="logo">
          Rlinks大数据平台
        </h1>
        <!-- 导航条 -->
        <nav class="nav nav5">
          <ul>
            <li v-for="(item, index) in otherLinks" :key="'otherlink_'+index">
              <a href="#" class="hvr-underline-from-center hvr-icon-wobble-vertical">
                <i class="fa hvr-icon" :class="item.icon"></i>
                {{ item.title }}
              </a>
              <ul>
                <li v-for="(linkItem, indey) in item.links" :key="'linkItem_'+indey">
                  <a @click.stop.prevent="handleNavClick(linkItem)">
                    {{ linkItem.name }}
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
      <!-- <div id="qrcode"></div> -->
      <div class="main">
        <div class="navItem hvr-bounce-in" v-for="(item, index) in navList" :key="'item_'+index"
          @click="goPage(item.link)">
          <div class="icon">
            <img :src="item.icon" :alt="item.tag">
          </div>
          <p class="text" :title="item.name">{{ item.name }}</p>
        </div>
      </div>
    </div>

    <div id="bg"></div>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%" center>
      <div id="qrcode"></div>
    </el-dialog>
  </template>


  <script src="js/three.min.js"></script>
  <script src="js/postprocessing.min.js"></script>
  <script src="js/InfiniteLights.js"></script>
  <script src="js/Distortions.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script>
    const app = Vue.createApp({
      template: '#tem',
      data() {
        return {
          navList: [
            {
              icon: './images/pay.png',
              name: '测试环境',
              tag: '测试环境',
              link: 'http://test.api.rlinks.com.cn:8070/',
            },
            {
              icon: './images/pay.png',
              name: '生产环境',
              tag: '生产环境',
              link: 'http://www.rlinks.com.cn:8080/',
            },
            {
              icon: './images/data.png',
              name: '测试环境',
              tag: '测试环境',
              link: 'http://test.iot.rlinks.com.cn',
            },
            {
              icon: './images/data.png',
              name: '测试-注册',
              tag: '测试环境',
              link: 'https://test.iot.rlinks.com.cn',
            },
            {
              icon: './images/data.png',
              name: '生产环境',
              tag: '生产环境',
              link: 'http://water.rlinks.com.cn',
            },
          ],
          otherLinks: [
            {
              title: '其他资源',
              icon: 'fa-paperclip',
              links: [
                {
                  name: '设备注册Excel模板',
                  link: 'http://resources.rlinks.com.cn/tool/NB批量注册.xls',
                  target: '_blank'
                },
                {
                  name: 'SVG图片在线编辑',
                  link: 'http://www.zuohaotu.com/svg/',
                  target: '_blank'
                },
                {
                  name: '版本1水表初始化工具',
                  link: 'http://resources.rlinks.com.cn/tool/版本1水表初始化工具.zip',
                  target: '_blank'
                },
                {
                  name: '燃气表NB-Dtu控制阀表号设置工具',
                  link: 'http://resources.rlinks.com.cn/tool/燃气表NB-Dtu控制阀表号设置工具.zip',
                  target: '_blank'
                },
              ]
            },
            {
              title: 'APP安装包',
              icon: 'fa-android',
              links: [
                {
                  name: '西安华盛APP',
                  link: 'http://resources.rlinks.com.cn/tool/xahs.apk',
                  target: 'qrcode'
                },
                {
                  name: '蓝牙水表APP',
                  link: 'https://bsppub.oss-cn-shanghai.aliyuncs.com/VKCEYUGU-de876c3a-6004-40e3-a677-4e03259716b3/16c7676e-6b10-4696-8c17-556311c6bc97.apk',
                  target: 'qrcode'
                },
              ]
            },
          ],
          dialogVisible: false,
          dialogTitle: '',
          qrcode: null,
        }
      },
      methods: {
        goPage(link) {
          window.open(link)
        },
        handleNavClick(val) {
          if (val.target === '_blank') {
            window.open(val.link)
          } else if (val.target === 'qrcode') {
            this.dialogTitle = val.name;
            this.dialogVisible = true;
            // 生成二维码
            this.$nextTick(() => {
              if (!this.qrcode) {
                this.qrcode = new QRCode('qrcode', {
                  text: '',
                  width: 256,
                  height: 256,
                  colorDark: '#000000',
                  colorLight: '#ffffff',
                  correctLevel: QRCode.CorrectLevel.H
                });
              }

              // 使用 API
              this.qrcode.clear();
              this.qrcode.makeCode(val.link);
            })
          }
        },
      }
    });
    app.use(ElementPlus);
    app.mount("#app");
  </script>

  <!-- 背景 -->
  <script>
    (function () {
      const container = document.getElementById('bg');
      const options = {
        onSpeedUp: (ev) => {
        },
        onSlowDown: (ev) => {
        },
        // mountainDistortion || LongRaceDistortion || xyDistortion || turbulentDistortion || turbulentDistortionStill || deepDistortionStill || deepDistortion
        distortion: LongRaceDistortion,

        length: 400,
        roadWidth: 12,
        islandWidth: 2,
        lanesPerRoad: 3,

        fov: 90,
        fovSpeedUp: 150,
        speedUp: 2,
        carLightsFade: 0.4,

        totalSideLightSticks: 50,
        lightPairsPerRoadWay: 50,

        // Percentage of the lane's width
        shoulderLinesWidthPercentage: 0.05,
        brokenLinesWidthPercentage: 0.1,
        brokenLinesLengthPercentage: 0.5,

        /*** These ones have to be arrays of [min,max].  ***/
        lightStickWidth: [0.12, 0.5],
        lightStickHeight: [1.3, 1.7],

        movingAwaySpeed: [60, 80],
        movingCloserSpeed: [-120, -160],

        /****  Anything below can be either a number or an array of [min,max] ****/

        // Length of the lights. Best to be less than total length
        carLightsLength: [400 * 0.05, 400 * 0.15],
        // Radius of the tubes
        carLightsRadius: [0.05, 0.14],
        // Width is percentage of a lane. Numbers from 0 to 1
        carWidthPercentage: [0.3, 0.5],
        // How drunk the driver is.
        // carWidthPercentage's max + carShiftX's max -> Cannot go over 1. 
        // Or cars start going into other lanes 
        carShiftX: [-0.2, 0.2],
        // Self Explanatory
        carFloorSeparation: [0.05, 1],

        colors: {
          roadColor: 0x080808,
          islandColor: 0x0a0a0a,
          background: 0x000000,
          shoulderLines: 0x131318,
          brokenLines: 0x131318,
          /***  Only these colors can be an array ***/
          leftCars: [0xff102a, 0xEB383E, 0xff102a],
          rightCars: [0xdadafa, 0xBEBAE3, 0x8F97E4],
          sticks: 0xdadafa,
        }
      };

      const myApp = new App(container, options);
      myApp.loadAssets().then(myApp.init)
    })()
  </script>
</body>

</html>